<template>
  <div class="app-container">
    <!-- 商品列表 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
      "
      style="width: 100%"
    >
      <el-table-column label="订单号">
        <template slot-scope="scope">
          <div @click="showSlide(scope.row)" style="cursor: pointer">
            {{ scope.row.no }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">
          {{ scope.row.createdAt | handleDate }}
        </template>
      </el-table-column>
      <el-table-column prop="receiver" label="收货人" />
      <el-table-column prop="regions" label="收货地址" />
      <el-table-column label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.price | handlePrice }}
        </template>
      </el-table-column>
      <el-table-column label="是否付款">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isPayed"
            active-text="是"
            inactive-text="否"
            @change="editorder(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="删除">
        <template slot-scope="scope">
          <!-- scope.row获取当前这一条数据 -->
          <i
            class="el-icon-delete"
            @click="handleDelete(scope.row)"
            style="color: blue"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改 -->
    <el-dialog title="修改支付状态" :visible.sync="dialogVisible" width="60%">
      <el-form ref="user" :model="reOrder" label-width="80px">
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="reOrder.isPayed"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="已支付"
            inactive-text="未支付"
          >
          </el-switch>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next,jumper"
      :total="totalCount"
      :page-size="PageSize"
      @current-change="handleCountChange"
    />
    <!-- 弹出层 -->
    <slide-view :show="showFlag" :showFlag.sync="showFlag" :message="message">
    </slide-view>
  </div>
</template>

<script>
import { orderList, reOrder, deOrder } from '@/api/order'
import SlideView from '@/views/mixin/slideminxin'
export default {
  mixins: [SlideView],
  name: 'ItemList',
  components: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      currentPage: 1, //  默认显示第几页
      totalCount: 1, // 总条数
      PageSize: 10,
      reOrder: {
        isPayed: false,
        _id: ''
      },
      orderSearchID: ''
    }
  },

  created() {
    this.initOrder()
  },
  methods: {
    // 分页
    // 显示第几页
    handleCountChange(val) {
      this.currentPage = val
    },

    //获取订单列表
    async initOrder() {
      const res = await orderList({
        per: 100,
        page: 1
      })
      console.log(res)
      this.tableData = res.orders
      this.totalCount = res.orders.length
    },
    // 弹出修改弹框函数
    async editorder(v) {
      this.reOrder.isPayed = v.isPayed
      this.reOrder._id = v._id
      await reOrder(this.reOrder._id, {
        isPayed: this.reOrder.isPayed
      })
      this.initOrder() // 再次调用接口
    },
    // 确定修改

    //删除订单信息
    async handleDelete(index) {
      await deOrder(index._id)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
      this.initOrder()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/edit.scss';
</style>
